{% extends 'layout.html' %}
{% load permission %}
{% load color %}


{% block content %}
    <div class="clearfix">
        <a class="btn btn-primary addBtn">新建 <span class="glyphicon glyphicon-plus-sign"></span></a>
    </div>

    <hr>
    <div style="padding: 0 20px 0 20px">
        <table class="table table-bordered table-striped table-hover">
            <thead>
            <tr class="text-center">
                <td>id</td>
                <td>charge_type</td>
                <td>amount</td>
                <td>order_oid</td>
                <td>create_datetime</td>
                <td>memo</td>
            </tr>
            </thead>
            <tbody>
            {% for foo in show_data %}
                <tr class="text-center ">
                    <td>{{ forloop.counter }}</td>
                    <td>
                        <span class="btn btn-{{ foo.charge_type|color }}">{{ foo.get_charge_type_display }}</span>
                    </td>
                    <td>
                        {% if foo.charge_type == 2 or foo.charge_type == 3 %}
                            -{{ foo.amount }}
                        {% else %}
                            +{{ foo.amount }}
                        {% endif %}
                    </td>
                    {% if foo.order_oid %}
                        <td>{{ foo.order_oid }}</td>
                    {% else %}
                        <td>-</td>
                    {% endif %}
                    <td>{{ foo.create_datetime|date:"Y-m-d H:i:s" }}</td>
                    {% if foo.memo %}
                        <td>{{ foo.memo }}</td>
                    {% else %}
                        <td>-</td>
                    {% endif %}
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    <h3 class="h3 text-center text-info">{{ errors }}</h3>

    <ul class="pagination">
        {{ pager_string }}
    </ul>

    <!-- Modal -->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title text-center text-info" id="myModalLabel">新建交易</h4>
                </div>
                <div class="modal-body">
                    <!-- 这里加上modelForm表单 -->
                    <form class="form-horizontal addForm">
                        {% csrf_token %}
                        {% for foo in form %}
                            <div class="form-group" style="position: relative;">
                                <label for="{{ foo.id_for_label }}"
                                       class="col-sm-2 control-label">{{ foo.label }}</label>
                                <div class="col-sm-10">
                                    {{ foo }}
                                    <span style="position: absolute; color: red"
                                          class="error-message">{{ foo.errors.0 }}</span>
                                </div>
                            </div>
                        {% endfor %}
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary submitBtn">Save changes</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script>
        $(function () {
            // 展示模态框
            $('.addBtn').click(function () {
                $('#addModal').modal('show')
            })
            // 提交按钮
            $('.submitBtn').click(function () {
                $('.error-message').empty()  // 清空错误信息
                $.ajax({
                    url: "{% url 'customer_list_order' pk=pk %}",
                    data: $('.addForm').serialize(),  // 拿到所有数据
                    type: 'post',
                    dataType: 'json',
                    success: function (data) {
                        if (data.status) {
                            window.location.reload();
                        } else {
                            $.each(data.detail, function (k, v) {
                                $('#id_' + k).next().text(v[0])  // 循环错误信息. 并添加到相应标签的下面
                            })

                        }
                    }
                })
            })
        })
    </script>
{% endblock %}